<template>
	<!-- 搜索 -->
	<view class="search">
		<view class="search-input">
			<van-icon name="search" />
			<input v-model="state.keyword" type="text" @blur="addHistory" />
		</view>
		<view @click="goHome" class="cancel">取消</view>
	</view>
	<view class="main-content">
		<view class="history">
			<template v-if="!searchResult.length">
				<view class="search-titlebar">
					<view class="title">历史记录</view>
					<van-icon @click="delHistory" name="delete-o" />
				</view>
			</template>
			<template v-else>
				<view class="search-result">
					<view
						@click="goSearchResult(item.tatle)"
						v-for="item in searchResult"
						:key="item.uid"
						class="item"
					>
						<van-icon name="search" />
						{{ item.tatle }}
					</view>
					<view class="item">
						<van-icon name="search" />
						121
					</view>
				</view>
			</template>
			<view class="history-list">
				<view
					@click="goSearchResult(item)"
					class="item"
					v-for="(item, i) in history"
					:key="i"
					>{{ item }}</view
				>
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs, watch } from 'vue'
import { searchResultApi } from '../../api/modules/article'
const state = reactive({
	keyword: '',
	history: uni.getStorageSync('HISTORY') || [],
	searchResult: []
})

const getSearchResult = async () => {
	const { data } = await searchResultApi({
		tatle: state.keyword,
		page: 1,
		size: 10
	})
	state.searchResult = data.data
}

const goSearchResult = item => {
	state.keyword = item
	uni.navigateTo({
		url: `/subpkg/search-result/search-result?name=${item}`
	})
	state.keyword = ''
	state.searchResult = []
}

const addHistory = () => {
	if (!state.keyword) return
	const index = state.history.findIndex(item => item === state.keyword)
	if (index !== -1) {
		state.history.splice(index, 1)
	}
	if (state.history.length > 10) {
		state.history.pop()
	}
	state.history.unshift(state.keyword)
	getSearchResult()
}
const delHistory = () => {
	uni.showModal({
		title: '提示',
		content: '是否要删除历史记录',
		success: res => {
			if (!res.confirm) return
			uni.removeStorageSync('HISTORY')
			state.history = []
		}
	})
}
const goHome = () => {
	uni.switchTab({
		url: '/pages/home/home'
	})
	state.keyword = ''
}
watch(
	() => state.history,
	() => {
		uni.setStorageSync('HISTORY', state.history)
	},
	{ deep: true }
)
// 页面加载
onLoad(message => {})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { history, searchResult } = toRefs(state)
</script>

<style lang="scss">
.search {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #3296fa;
	height: 94rpx;
	line-height: 94rpx;
	box-sizing: border-box;
	color: #fff;
	padding-left: 20rpx;
	.search-input {
		display: flex;
		align-items: center;
		flex: 1;
		padding: 10rpx 20rpx 10rpx 0;
		background-color: #f7f8fa;
		border-radius: 4rpx;
		color: #323233;
		font-size: 28rpx;
		&:first-child {
			padding-left: 20rpx;
		}
		input {
			margin-left: 24rpx;
		}
	}
	.cancel {
		padding: 0 20rpx;
	}
}
.main-content {
	background-color: #f5f7f9;
	height: calc(100vh - 94rpx);
	.history {
		color: #323233;
		font-size: 28rpx;
		line-height: 24px;
		background-color: #fff;
		.search-titlebar {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #ebedf0;
			padding: 10px 15px;
			box-sizing: border-box;
		}
		.search-result {
			border-bottom: 2rpx solid #ebedf0;
			.item {
				border-bottom: 2rpx solid #ebedf0;
				padding: 10px 15px;
				box-sizing: border-box;
				&:last-child {
					border-bottom: 0;
				}
			}
		}
		.history-list {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			.item {
				text-align: center;
				border-top: 1rpx solid #e8e8e8;
				width: calc(50% - 4rpx);
				height: 45px;
				line-height: 45px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
			.item:first-child {
				border-top: 0;
			}
			.item:nth-child(2) {
				border-top: 0;
			}
			.item:nth-child(odd) {
				border-right: 1rpx solid #e8e8e8;
			}
		}
	}
}
</style>
